<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p id="p1">段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
    <script>
        let p1 = document.getElementById("p1");
        console.log('p1：',p1)
        // 元素节点：nodeType为1，nodeName为元素名，nodeValue为null
        console.log('nodeType',p1.nodeType);
        console.log('nodeName',p1.nodeName);
        console.log('nodeValue',p1.nodeValue);
        // 属性节点：nodeType为2，nodeName为属性名，nodeValue为属性值
        let attr = p1.attributes['id'];
        console.log('nodeType',attr.nodeType);
        console.log('nodeName',attr.nodeName);
        console.log('nodeValue',attr.nodeValue);
        // 文本节点：nodeType为3，nodeName为#text，nodeValue为文本内容
        let textNode = p1.firstChild;
        console.log('nodeType',textNode.nodeType);
        console.log('nodeName',textNode.nodeName);
        console.log('nodeValue',textNode.nodeValue);
    </script>
</body>
</html>